<template>
	<div style="overflow: auto;width: 100%;">
		<div>
			<el-button size="mini" @click="onAddRowClickHandler">增加行</el-button>
		</div>
		<table cellspacing="0" cellpadding="0" class="editabletable" style="margin-top: 5px;">
			<thead>
				<tr>
					<th>字段</th>
					<th>操作</th>
					<th>值1</th>
					<th>值2</th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(rowObject,index) in rowObjectArray" :key="index">
					<td>
						<el-select size="mini" v-model="rowObject.field" placeholder="请选择"
							@change="onFieldChangeHandler(rowObject)">
							<el-option v-for="item in componentList" :key="item.dataField" :label="item.label"
								:value="item.dataField">
							</el-option>
						</el-select>
					</td>
					<td>
						<el-select size="mini" v-model="rowObject.op" placeholder="请选择">
							<el-option v-for="item in opList" :key="item" :label="item" :value="item">
							</el-option>
						</el-select>
					</td>
					<td>
						<ComponentFactory :componentModel="rowObject.componentModel" :options="rowObject.options"
							:ref="'component1'+rowObject.currentIndex">
						</ComponentFactory>
					</td>
					<td>
						<ComponentFactory :componentModel="rowObject.componentModel" :options="rowObject.options"
							:ref="'component2'+rowObject.currentIndex">
						</ComponentFactory>
					</td>
					<td>
						<i class="el-icon-delete" @click="onDeleteRowClickHandler(rowObject)"></i>
					</td>
				</tr>
			</tbody>
		</table>
		<div style="text-align: right;margin-top: 10px;">
			<el-button type="primary" size="small" @click="dataSearch">确定</el-button>
		</div>
	</div>
</template>

<script>
	import ComponentFactory from '@/components/ComponentFactory.vue';
	import {
		processResponse
	} from '@/utils/pageUtils.js';
	import utils from '@/utils/utils.js';
	import {
		ElLoading
	} from 'element-plus';
	import restUtil from '@/utils/restUtil.js';
	export default {
		name: "AdvanceQueryPage",
		props: ["para1"],
		components: {
			ComponentFactory
		},
		data() {
			return {
				viewPropMap: {},
				rowObjectArray: [],
				componentList: [],
				opList: ["=", "<>", ">", ">=", "<", "<=", "between","isnull","isnotnull","like"],
				currentIndex: 1,
			}
		},
		mounted() {
			//this.init();
		},
		methods: {
			init() {
				var that = this;
				const loading = ElLoading.service({
					lock: true,
					text: 'Loading',
					background: 'rgba(0, 0, 0, 0.7)',
				})
				restUtil.getAction(this,"advancequerypage/init?pageCode=" + this.para1 + "&_c=" + Math
				.random()).then(
					function(response) {
						if (response.data.code == 1) {
							var viewSerializeMap = response.data.viewSerializeMap;
							that.viewPropMap = response.data.viewPropMap;
							var innerComponentList = [];
							var typeList = ["text", "number", "select", "search", "datetime", "date", "time",
								"textarea", "checkbox", "formula", "rollupsummary"
							];
							that.getComponentList(viewSerializeMap, innerComponentList, typeList);
							that.componentList = innerComponentList;
							loading.close();
						} else {
							that.$alert(response.data.message, '提示');
						}
					});
			},
			getComponentList(viewSerializeMap, innerComponentList, typeList) {
				var type = viewSerializeMap.type;
				for (var i = 0; i < typeList.length; i++) {
					if (typeList[i] == type) {
						viewSerializeMap.noLabel = true;
						viewSerializeMap.col = 4;
						viewSerializeMap.componentValueChangeSystem = false,
							viewSerializeMap.componentModel = false;
						innerComponentList.push(viewSerializeMap);
						break;
					}
				}
				if (viewSerializeMap.children != null && viewSerializeMap.type != "table") {
					var children = viewSerializeMap.children;
					for (var j = 0; j < children.length; j++) {
						this.getComponentList(children[j], innerComponentList, typeList);
					}

				}
			},
			onAddRowClickHandler() {
				var rowObject = {
					currentIndex: this.currentIndex,
					field: this.componentList[0].dataField,
					"op": "=",
					componentModel: this.componentList[0]
				};
				this.rowObjectArray.push(rowObject);
				this.currentIndex++;
			},
			onFieldChangeHandler(rowObject) {
				var dataField = rowObject.field;
				for (var i = 0; i < this.componentList.length; i++) {
					if (this.componentList[i].dataField == dataField) {
						if (this.componentList[i].type == "select") {
							var id = this.componentList[i].id;
							var options = this.viewPropMap[id]["options"];
							rowObject["options"] = options;
						}
						rowObject.componentModel = this.componentList[i];
						break;
					}
				}
			},
			onDeleteRowClickHandler(rowObject) {
				for (var i = 0; i < this.rowObjectArray.length; i++) {
					if (this.rowObjectArray[i].currentIndex == rowObject.currentIndex) {
						this.rowObjectArray.splice(i, 1);
						break;
					}
				}
			},
			dataSearch() {
				var buttonComponent = this.$parent.$parent.$parent.$parent.$parent;
				var pageComponent = utils.getPageComponent(buttonComponent);
				var that = this;
				var request = {};
				var rowObjectArray = [];
				for (var i = 0; i < this.rowObjectArray.length; i++) {
					var rowObject = {
						"field": this.rowObjectArray[i].field,
						"op": this.rowObjectArray[i].op
					};
					var value1 = this.$refs["component1" + this.rowObjectArray[i].currentIndex].getValue();
					var value2 = this.$refs["component2" + this.rowObjectArray[i].currentIndex].getValue();
					if (value1 != undefined) {
						rowObject["value1"] = value1;
					}
					if (value2 != undefined) {
						rowObject["value2"] = value2;
					}
					rowObjectArray.push(rowObject);
				}
				request["rowObjectArray"] = rowObjectArray;
				restUtil.postAction(this,"advancequerypage/dataSearch?pageCode=test1&listViewPageCode=" +
					pageComponent.componentModel.code, request).then(
					function(response) {
						if (response.data.code == 1) {
							that.$emit("closeDialogEvent", this);
							processResponse(pageComponent, pageComponent, response.data, buttonComponent.children);
						} else {
							that.$alert(response.data.message, '提示');
						}
					});
			},
		},
	}
</script>

<style>
</style>
